<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/table.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="${pageContext.request.contextPath}/dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-2.1.4.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0" class="table_border">
	<tr>
		<td>
			<table width="100%" border="0" cellpadding="0" cellspacing="0"
				class="table_right">
				<tr>
					<td><font style="font-size: 12px;"><strong>为用户分配角色</strong></font>
					</td>
					<td width="25" height="26" align="left"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" border="0" cellspacing="0" class="table_padding">
				<tr>
					<td>
						<table style="font-size:12px;" width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="42%">
									<div class="list_tit">${user.name}，未分配角色列表</div>
								</td>
								<td width="15%">&nbsp;</td>
								<td width="43%">
									<div class="list_tit">${user.name}，已分配角色列表</div>
								</td>
							</tr>
							<tr>
								<td>
									<select ondblclick="toAssignRole()"  id="unAssignRole" size="20" name="srcList" id="srcList" style="width: 100%; font-size: 12px;" multiple="multiple">

									</select>
								</td>
								<td>
									<p align="center">
										<img style="cursor:pointer;" onmouseout="this.width=30;this.height=30;"
                                             onmouseover="this.width=35;this.height=35;"
                                             width="30px;" height="30px;" alt="分配角色"
                                             src="${pageContext.request.contextPath}/images/youjt.png" title="分配角色">
									</p>
									<br><br><br><br>
									<p align="center">
										<img style="cursor:pointer;" onmouseout="this.width=30;this.height=30;" 
											onmouseover="this.width=35;this.height=35;" 
											width="30px;" height="30px;" width="30px;" 
											height="30px;" alt="撤销角色" src="${pageContext.request.contextPath}/images/zuojt.png"
											title="撤销角色">
									</p>
								</td>
								<td>
									<select ondblclick="toUnAssignRole()"  id="assignRole" name="destList" size="20" multiple="multiple" id="destList" style="width: 100%; font-size: 12px;">

									</select>
								</td>
							</tr>
						</table>
						<table width="100%" border="0" cellpadding="0" cellspacing="0"
							class="table_padding">
							<tr>
								<td height="21" align="right">
									<table align="right">
										<tr>
											<td width="50px"><a class="button"
												href="javascript:void(window.history.back());"><span>返回</span></a></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<script>

	$.post("getAssignRole",{userId:"${user.id}"},function (data) {

		let str1 = ``;
		let str2 = ``;
		for (let i = 0; i < data.assignRole.length; i++) {
			str1+=`
				<option   value="\${data.assignRole[i].id}">\${data.assignRole[i].name}</option>
			`;
		}
		for (let i = 0; i < data.unAssignRole.length; i++) {
			str2+=`
				<option  value="\${data.unAssignRole[i].id}">\${data.unAssignRole[i].name}</option>
			`;
		}
		$("#unAssignRole").html(str2)
		$("#assignRole").html(str1)
	});

	//取消分配角色
	function toUnAssignRole() {

		$.post("unAssignRole",{uid:"${user.id}",rid:$(":selected").val()},function (data) {
			if(data.status==true){
				$(":selected").appendTo($("#unAssignRole"));
			}
		});
	}
	//分配角色
	function toAssignRole() {

		$.post("assignRole",{uid:"${user.id}",rid:$(":selected").val()},function (data) {
			if(data.status=true){
				$(":selected").appendTo($("#assignRole"));
			}
		});
	}

</script>
